<%@ include file="/WEB-INF/views/public/include.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 页面编码 -->
	<meta charset="utf-8">
  	<!-- 手机浏览器禁止缩放, 页面大小默认为手机屏幕宽度 -->
  	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  	<!-- 允许IOS全屏显示网页 -->
  	<meta content="yes" name="apple-mobile-web-app-capable" />
  	<!-- 设置IOS状态栏为透明底色 -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<!-- 设置360浏览器渲染引擎为webkit -->
  	<meta name="renderer" content="webkit">
  	<!-- 设置APP标题 -->
  	<meta name="apple-mobile-web-app-title" content="青年电影志">
  	<!-- 关闭自动识别电话号码 -->
  	<meta name="format-detection" content="telephone=no">
	<!-- iPhone桌面图标 -->
	<link href="/resources/static/images/app-60@2x.png" sizes="120x120" rel="apple-touch-icon-precomposed">
  	<!-- 页面标题 -->
  	<title>预约</title>

  	<!-- 基本样式载入 -->
  	<link rel="stylesheet" href="/resources/static/css/ionicons.min.css">
	<link rel="stylesheet" href="/resources/static/css/public.css">
	<!-- 基本脚本载入 -->
	<script src="/resources/static/js/plugins.min.js"></script>
</head>
<body>
	<div id="app" class="site" data-controller="yuyuePage">
		<div class="bar bar-footer bar-primary">
			<a role="button" class="nav-btn js-confirm"><i class="ion-chatbubbles"></i>确认</a>
		</div>
		<div id="content" class="site-content">
			<div class="inner">
				<div class="topic-head">
					<h5>预约话题</h5>
					<div class="topic-item">
						<div class="plan-item-title">${application.subjectTitle}</div>
						<div class="plan-item-meta">
							<p>${application.price}元/次</p>
							<p>${application.getDurationString()}</p>
						</div>
					</div>
					<!-- END .topic-item -->
				</div>
				<!-- END .topic-head -->
				<form:form method="post" action="./make.do?subjectId=${application.subjectId}" commandName="application" class="step-form js-step-form">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="step-group">
								<h4 class="step-title">告诉行家你要请教的问题（30-300字）</h4>
								<form:textarea path="chatContent" rows="10" class="form-control js-required"></form:textarea>
							</div>
							<!-- END .step-group -->
						</div>
						<!-- END .swiper-slide -->
						<div class="swiper-slide">
							<div class="step-group">
								<h4 class="step-title">介绍自己当前的情况（30-300字）</h4>
								<form:textarea path="instruction" rows="10" class="form-control js-required"></form:textarea>
							</div>
							<!-- END .step-group -->
						</div>
						<!-- END .swiper-slide -->
						<div class="swiper-slide">
							<div class="step-group">
								<h4 class="step-title">未来两周方便见面的时间（2-50字）</h4>
								<form:textarea path="dateTime" rows="10" class="form-control js-required"></form:textarea>
							</div>
							<!-- END .step-group -->
						</div>
						<!-- END .swiper-slide -->
						<div class="swiper-slide">
							<div class="step-group">
								<h4 class="step-title">个人信息</h4>
								<div class="form-group">
									<form:input path="realName" type="text" class="form-control js-required" placeholder="真实姓名" />
								</div>
								<div class="form-group">
									<form:input path="phone" type="text" class="form-control js-phone" placeholder="手机号" />
								</div>
								<div class="form-group">
									<form:input path="weixin" type="text" class="form-control js-required" placeholder="微信号" />
								</div>
								<div class="form-group">
									<form:input path="region" type="text" class="form-control js-required" placeholder="平时活动区域" />
								</div>
								<div class="form-group">
									<form:input path="presenter" type="text" class="form-control" placeholder="推荐人" />
								</div>
							</div>
							<!-- END .step-group -->
						</div>
						<!-- END .swiper-slide -->
					</div>
					<!-- END .swiper-wrapper -->
					<div class="swiper-pagination"></div>
				</form:form>
				<!-- END .step-form -->
				<div class="form-alter">
					<i class="ion-information-circled"></i>
					<small>详细描述问题有助于电影咖更了解您</small>
					<p>您填写的信息只能电影咖能看到，不会公开给其他人</p>
				</div>
			</div>
			<!-- END .inner -->
		</div>
		<!-- END #content -->
	</div>
	<!-- END #page -->
	<!-- 页面脚本载入 -->
	<script src="/resources/static/js/app.js"></script>
</body>
</html>